/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...



$(function(){
    var $title = $("#title")
    $title.keydown(e=>{
        e = e || window.event
        var code = e.keydown || e.which;
        if(code === 13){
            createList();
            $title.val("");
        }
    })
    function createList(){
        var val = $title.val();
        var $li =$( `
        <li>
            <input type="checkbox">
            <p>${ val }</p>
            <a href="javascript:void(0)">-</a>
        </li>
        `)
            $("#todolist").append($li);           
    }
    $("section").on("change","input[type=checkbox]",function(){
        if($(this).prop("checked")){
            $("#donelist").append($(this).parent());
        }else{
            $("#todolist").append($(this).parent())
        }
    })

    $("#todolit").on("click","p",function(){
        $(this).innerHTML("<input type='text' value='"+ $(this).text()+"'>")
        var $ipt = $(this).children()
        $ipt.click(function(evt){
            var e = evt || event;
            e.stopPropagation()
        })
        $ipt.select()
        $ipt.blur(function(evt){
            this.outerHTML = this.value
        })
    })


    $("section").on("click","a",function(){
        $(this).parent().remove();
    })
})
    $(document).on("mouseover", function () {
        $.ajax({
            url: "/ip",
            type: "GET",
            data: {
                ip: '',
                country: '',
                area: ''
            },
            dataType: "json",
            success: function (res) {
                console.log(res);
                fn(res)
            }
        })
    })

    function fn(res) {
        $("#ipv4").html(`${res.ip}`)
        $("#addr").html(`${res.country} ${res.area}互联网数据交换中心`)
    }




















